<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化</title>
</head>
<body>
    
    <div id="app">
      <twl :num="numxx"></twl>
      <app-twl></app-twl>
    </div>
  <hr>

    <div id="app2">
      <twl :num="numxx"></twl>
    </div>
  

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
      //1.全局組件：在所有的vue实例中使用
      /*
        1.1 命名:不要使用驼峰命名(会抱错),可以使用中划线的方式,例如t-wl
        1.2 模板:必须的
        1.3 数据:一定要函数的方式声明
      */
      Vue.component("twl",{
        template:`<div @click="num++">{{num}}</div>`,
        // data(){
        //   return{
        //     num:10
        //   }
        // }
        props:["num"]
      })

      const appTwl = {
        template:`<div @click="num++">{{num}}</div>`,
        data(){
          return{
            num:66
          }
        },
      }

      // 2.局部组件
      new Vue({
          el: "#app",
          data:{
            numxx:50
          },
          components:{
            "app-twl":appTwl
          }
        });

        new Vue({
          el: "#app2",
          data:{
            numxx:100
          }
        });
    </script>
</body>
</html>